<template>
  <div v-if="routerView" id="waterMakerContainer" class="app-main-container">
    <transition mode="out-in" name="fade-transform">
      <keep-alive :include="cachedRoutes" :max="keepAliveMaxNum">
        <router-view :key="$route.path" class="app-main-height"></router-view>
      </keep-alive>
    </transition>
    <footer class="footer-copyright">
      Copyright
      <amf-remix-icon icon-class="copyright-line"></amf-remix-icon>
      {{ title }} {{ fullYear }} by {{ copyright }}
    </footer>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex';
  import watermark from 'watermark-common';
  import {
    copyright,
    keepAliveMaxNum,
    title,
    waterMark,
  } from '@/config/settings';

  export default {
    name: 'AppMain',
    data() {
      return {
        show: false,
        fullYear: new Date().getFullYear(),
        copyright,
        title,
        keepAliveMaxNum,
        routerView: true,
      };
    },
    computed: {
      ...mapGetters({
        visitedRoutes: 'tagsBar/visitedRoutes',
        device: 'settings/device',
      }),
      cachedRoutes() {
        return this.visitedRoutes
          .filter(item => !item.meta.noKeepAlive)
          .flatMap(item => item.matched);
      },
    },
    watch: {
      $route: {
        handler(route) {
          if ('mobile' === this.device) {
            this.$store.dispatch('settings/foldSideBar');
          }
        },
        immediate: true,
      },
    },
    created() {
      //重载所有路由
      this.$baseEventBus.$on('reloadRouterView', () => {
        this.routerView = false;
        this.$nextTick(() => {
          this.routerView = true;
        });
      });
    },
    mounted() {
      // 水印功能自行开启
      if (waterMark) {
        this.$nextTick(() => {
          watermark.init({
            watermark_id: 'wm_div_id', //水印总体的id
            watermark_prefix: 'mask_div_id', //小水印的id前缀
            watermark_txt: '测试水印', //水印的内容
            watermark_x: 20, //水印起始位置x轴坐标
            watermark_y: 40, //水印起始位置Y轴坐标
            watermark_rows: 0, //水印行数
            watermark_cols: 0, //水印列数
            watermark_x_space: 50, //水印x轴间隔
            watermark_y_space: 20, //水印y轴间隔
            watermark_font: '微软雅黑', //水印字体
            watermark_color: 'black', //水印字体颜色
            watermark_fontsize: '1', //水印字体大小, 以rem为单位
            watermark_alpha: 0.15, //水印透明度，要求设置在大于等于0.005
            watermark_width: 100, //水印宽度
            watermark_height: 100, //水印长度
            watermark_angle: 15, //水印倾斜度数
            watermark_parent_selector: '#waterMakerContainer', //水印插件挂载的父元素id,不输入则默认挂在body上
          });
        });
      }
    },
  };
</script>

<style lang="scss" scoped>
  .app-main-container {
    position: relative;
    width: 100%;
    overflow: hidden;

    .app-main-height {
      min-height: $base-app-main-height;
    }

    .footer-copyright {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 55px;
      padding: 0 $base-padding 0 $base-padding;
      color: rgba(0, 0, 0, 0.45);
      border-top: 1px dashed $base-border-color;

      i {
        margin: 0 5px;
      }
    }
  }
</style>
